<template>
  <div class="app-container">
    <el-tabs
      v-model="functionCode"
      type="border-card"
      @tab-click="queryElementDetails"
      class="tab-container"
    >
      <el-tab-pane
        v-for="dict in dict.type.sys_elment_type"
        :key="dict.value"
        :label="dict.label"
        :name="dict.value"
      />
      <div class="form-container">
        <el-form :ref="formRef" :model="form" :rules="rules" label-width="140px">
          <el-row>
            <template v-for="(item, index) in elementList">
              <el-col :span="['textarea', 'editor'].includes(item.elementType) ? 24: 12">
                <el-form-item :label="item.elementName" :prop="item.elementCode">
                  <el-input
                    v-if="item.elementType === 'input'"
                    v-model="form[item.elementCode]"
                    :disabled="item.dvDisabled === 'Y'"
                    :placeholder="'请输入' + item.elementName"
                    clearable
                  />
                  <el-input
                    v-else-if="item.elementType === 'password'"
                    v-model="form[item.elementCode]"
                    :disabled="item.dvDisabled === 'Y'"
                    :placeholder="'请输入' + item.elementName"
                    type="password"
                    show-password
                    clearable
                  >
                    <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />
                  </el-input>
                  <image-upload
                    v-else-if="item.elementType === 'imageUpload'"
                    v-model="form[item.elementCode]"
                    :disabled="item.dvDisabled === 'Y'"
                    :elementCode="item.elementCode"
                    @setImageUrl="setImageUrl(arguments)"
                    :limit="1"
                  />
                  <file-upload
                    v-else-if="item.elementType === 'fileUpload'"
                    v-model="form[item.elementCode]"
                    :disabled="item.dvDisabled === 'Y'"
                    :elementCode="item.elementCode"
                    @setFileUrl="setFileUrl(arguments)"
                    :limit="1"
                  />
                  <editor
                    v-else-if="item.elementType === 'editor'"
                    v-model="form[item.elementCode]"
                    :min-height="192"
                    :disabled="item.dvDisabled === 'Y'"
                  />
                  <el-select
                    v-else-if="item.elementType === 'select'"
                    v-model="form[item.elementCode]"
                    :placeholder="'请选择' + item.elementName"
                    :disabled="item.dvDisabled === 'Y'"
                    :multiple="item.dvMultiple === 'Y'"
                  >
                    <el-option
                      v-for="dict in item.dictOptions"
                      :key="dict.dictValue"
                      :label="dict.dictLabel"
                      :value="dict.dictValue"
                    ></el-option>
                  </el-select>
                  <el-checkbox-group
                    v-else-if="item.elementType === 'checkbox'"
                    v-model="form[item.elementCode]"
                    :disabled="item.dvDisabled === 'Y'"
                  >
                    <el-checkbox
                      v-for="dict in item.dictOptions"
                      :key="dict.dictValue"
                      :label="dict.dictValue">
                      {{dict.dictLabel}}
                    </el-checkbox>
                  </el-checkbox-group>
                  <el-radio-group
                    v-else-if="item.elementType === 'radio'"
                    v-model="form[item.elementCode]"
                    :disabled="item.dvDisabled === 'Y'"
                  >
                    <el-radio
                      v-for="dict in item.dictOptions"
                      :key="dict.dictValue"
                      :label="dict.dictValue"
                    >{{dict.dictLabel}}</el-radio>
                  </el-radio-group>
                  <el-date-picker
                    v-else-if="item.elementType === 'datetime'"
                    clearable
                    v-model="form[item.elementCode]"
                    type="date"
                    value-format="yyyy-MM-dd"
                    :placeholder="'请选择' + item.elementName"
                    :disabled="item.dvDisabled === 'Y'"
                  >
                  </el-date-picker>
                  <el-input
                    v-else
                    v-model="form[item.elementCode]"
                    rows="3"
                    type="textarea"
                    :disabled="item.dvDisabled === 'Y'"
                    placeholder="请输入内容"
                  />
                </el-form-item>
              </el-col>
            </template>
          </el-row>
        </el-form>
        <div v-if="elementList.length === 0" style="display: flex;height: 100%;width: 100%;text-align: center;align-items: center;justify-content: center">当前表单配置为空，请前往要素配置管理配置对应表单！</div>
      </div>
      <el-divider content-position="center"/>
      <el-row type="flex" align="middle" justify="center" style="padding-bottom: 10px">
        <el-button type="primary" @click="handleSave">保存</el-button>
      </el-row>
    </el-tabs>
  </div>
</template>
<script>
import { queryByFunctionCodes } from '@/api/system/elementConfig'
import { saveElements } from '@/api/system/elements'

export default {
  name: 'elements',
  components: {},
  dicts: ['sys_elment_type'],
  watch: {
    'dict.type.sys_elment_type': function(newVal, oldVal) {
      if (newVal.length > 0) {
        this.functionCode = newVal[0].value;
        this.queryElementDetails();
      }
    }
  },
  data() {
    return {
      // 当前要素类型
      functionCode: '',
      // 要素信息
      elementList: [],
      // 表单数据
      form: {},
      // 校验规则
      rules: {},
      // 表单ref
      formRef: this.functionCode + '_FORM'
    }
  },
  created() {
  },
  methods: {
    /** 查询要素详情 */
    queryElementDetails() {
      queryByFunctionCodes(this.functionCode).then(res => {
        this.elementList = res.data;
        for (const item of this.elementList) {
          if (item.dvMultiple === 'Y') {
            this.$set(this.form, item.elementCode, item.elementValue?.split(','))
          } else {
            this.$set(this.form, item.elementCode, item.elementValue)
          }
          if (item.dvRequired === 'Y') {
            const rule = {
              required: true,
              message: item.elementName + '不能为空',
              trigger: item.elementType === 'select' ? 'change' : 'blur'
            }
            this.$set(this.rules, item.elementCode, rule);
          }

        }
      })
    },
    /** 图片回显 */
    setImageUrl(arg) {
      const elementCode = arg[0];
      const url = arg[1];
      this.$set(this.form, elementCode, url);
    },
    /** 文件回显 */
    setFileUrl(arg) {
      const elementCode = arg[0];
      const url = arg[1];
      this.$set(this.form, elementCode, url);
    },
    /** 保存要素信息 */
    handleSave() {
      if (this.elementList.length === 0) {
        this.$message.warning('请前往要素配置管理配置对应表单！')
        return;
      }
      this.$refs[this.formRef].validate(valid => {
        if (valid) {
          const formList = JSON.parse(JSON.stringify(this.elementList));
          for (let item of formList) {
            if (item.dvMultiple === 'Y') {
              item.elementValue = this.form[item.elementCode]?.join(',')
            } else {
              item.elementValue = this.form[item.elementCode]
            }
          }
          saveElements(formList).then(res => {
            this.$message.success(res.msg);
          })
        }
      });
    }
  }
}
</script>
<style lang="scss" scoped>
.tab-container {
  height: calc(100vh - 115px);
  overflow: hidden;
  min-width: 750px;
  max-width: 60%;
  margin: auto;
  .form-container {
    height: calc(100vh - 250px);
    overflow-y: scroll;
    padding: 10px;
  }
  ::v-deep .el-divider {
    margin-top: 5px !important;
    margin-bottom: 15px !important;
  }
}
</style>
